<template>
	<div class="footer" @click="addList">
		<i class="icon iconfont">&#xe642;</i>
		<span>新建清单</span>
	</div>
</template>

<script lang="ts">
import { useStore } from '@/store'
import { defineComponent } from 'vue'

export default defineComponent({
	setup() {
		const store = useStore()
		const addList = () => {
			store.dispatch('list/addList', {
				title: '无标题清单',
				icon: 'list',
				userId: store.state.user.userInfo.id
			})
		}

		return {
			addList
		}
	}
})
</script>

<style lang="less" scoped>
.footer {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	padding: 10px 20px;
	box-sizing: content-box;
	color: #4a4aff;
	span {
		margin-left: 20px;
		font-size: 24px;
	}
}
</style>
